<div id="mywebgl" style="width:300px;height:300px;outline: 1px solid red;"></div>
<script type="module">
    import { getWebGLContext, Shader, Buffer, Matrix4 } from 'vislite';

    var painter = new getWebGLContext(document.getElementById('mywebgl'));

    var shader = new Shader(painter).compile("color").use();

    // 设置点颜色
    painter.uniform4f(painter.getUniformLocation(shader.program, "u_color"), 1, 0, 0, 1);

    // 设置点位置
    new Buffer(painter).use().write(new Float32Array([
        -1, 1, 1,
        1, 1, -1,
        -1, -1, 0
    ])).divide(painter.getAttribLocation(shader.program, "a_position"), 3, 3, 0);

    // 设置矩阵
    painter.uniformMatrix4fv(painter.getUniformLocation(shader.program, "u_matrix"), false, new Matrix4().value());

    painter.drawArrays(painter.TRIANGLE_STRIP, 0, 3);

</script>